<template>
    <div class="home-container">
        <!-- 轮播图 -->
        <swiper>
            <swiper-slide v-for="item in lunboData" :key="item.img">
                <img :src="item.img">
            </swiper-slide>
        </swiper>


        <van-divider @click="$router.push('/goodslist')" content-position="right">更多</van-divider>
        <!-- 商品列表 -->
        <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="good in goods" :key="good.id" @click="$router.push(`/detail?id=${good.id}`)">
                <div class="good">
                    <img v-lazy="good.img_url">
                </div>
                <div class="info">
                    <span class="title">{{ good.title }}</span>
                    <span class="price">{{ good.sell_price }}¥</span>
                </div>
            </van-grid-item>
        </van-grid>
    </div>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import { ref, onMounted } from 'vue'
import axios from 'axios'

const lunboData = ref([])
const goods = ref([])

onMounted(() => {
    fetchLunboData()
    fetchGoodsList()
})

// 获取轮播图接口数据
const fetchLunboData = async () => {
    let { data } = await axios.get('http://47.98.187.80:5000/api/getlunbo')
    lunboData.value = data.message
}

// 获取商品列表接口数据
const fetchGoodsList = async () => {
    let { data } = await axios.get('http://47.98.187.80:5000/api/recommend?page=1&limit=12')
    goods.value = data.message
}
</script>
<style lang="scss" scoped>
.home-container {
    .swiper {
        // width: 800px;

        .swiper-slide {
            img {
                width: 100%;
                height: 360px;
            }
        }
    }

    .van-grid {
        .good {
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: 80%;
            }
        }

        .info {
            font-size: 14px;
            display: flex;
            flex-direction: column;
            padding: 2px;
            justify-content: space-between;

            .title {
                height: 38px;
                width: 100%;
                overflow: hidden;
            }

            .price {
                font-size: 12px;
                color: red;
            }



        }
    }

}
</style>